<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringAI智能助手测试页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 800px;
            padding: 30px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            color: #333;
            margin-bottom: 10px;
            font-size: 2.5em;
        }
        
        .header p {
            color: #666;
            font-size: 1.1em;
        }
        
        .chat-container {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            height: 400px;
            overflow-y: auto;
            padding: 20px;
            margin-bottom: 20px;
            background: #f9f9f9;
        }
        
        .message {
            margin-bottom: 15px;
            padding: 12px 16px;
            border-radius: 18px;
            max-width: 80%;
            word-wrap: break-word;
        }
        
        .user-message {
            background: #007bff;
            color: white;
            margin-left: auto;
            text-align: right;
        }
        
        .ai-message {
            background: #e9ecef;
            color: #333;
            margin-right: auto;
        }
        
        .input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .input-container input {
            flex: 1;
            padding: 12px 16px;
            border: 2px solid #ddd;
            border-radius: 25px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .input-container input:focus {
            border-color: #007bff;
        }
        
        .input-container button {
            padding: 12px 24px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        
        .input-container button:hover {
            background: #0056b3;
        }
        
        .input-container button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .test-buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        
        .test-btn {
            padding: 8px 16px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
        }
        
        .test-btn:hover {
            background: #218838;
        }
        
        .status {
            text-align: center;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        .status.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .loading {
            display: none;
            text-align: center;
            color: #666;
        }
        
        .loading::after {
            content: '';
            animation: dots 1.5s infinite;
        }
        
        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60% { content: '...'; }
            80%, 100% { content: ''; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 SpringAI智能助手</h1>
            <p>测试AI对话功能和系统集成</p>
        </div>
        
        <div id="status" class="status" style="display: none;"></div>
        
        <div class="test-buttons">
            <button class="test-btn" onclick="testHealth()">健康检查</button>
            <button class="test-btn" onclick="testSimple()">简单测试</button>
            <button class="test-btn" onclick="testApi()">API直连测试</button>
            <button class="test-btn" onclick="testConfig()">SpringAI配置</button>
            <button class="test-btn" onclick="testFactory()">工厂数据测试</button>
            <button class="test-btn" onclick="clearChat()">清空对话</button>
            <button class="test-btn" onclick="testQuestions()">快速测试</button>
        </div>
        
        <div id="chatContainer" class="chat-container">
            <div class="ai-message">
                👋 您好！我是SpringAI智能助手，可以回答您的问题。请输入您想要咨询的内容。
            </div>
        </div>
        
        <div class="input-container">
            <input type="text" id="userInput" placeholder="请输入您的问题..." onkeypress="handleKeyPress(event)">
            <button id="sendBtn" onclick="sendMessage()">发送</button>
        </div>
        
        <div id="loading" class="loading">AI正在思考中</div>
    </div>

    <script>
        let chatId = 'test_' + Date.now();
        
        function showStatus(message, type) {
            const status = document.getElementById('status');
            status.textContent = message;
            status.className = `status ${type}`;
            status.style.display = 'block';
            setTimeout(() => {
                status.style.display = 'none';
            }, 3000);
        }
        
        function addMessage(content, isUser) {
            const chatContainer = document.getElementById('chatContainer');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
            messageDiv.textContent = content;
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
        
        function setLoading(loading) {
            document.getElementById('loading').style.display = loading ? 'block' : 'none';
            document.getElementById('sendBtn').disabled = loading;
        }
        
        async function sendMessage() {
            const input = document.getElementById('userInput');
            const message = input.value.trim();
            
            if (!message) return;
            
            addMessage(message, true);
            input.value = '';
            setLoading(true);
            
            try {
                const response = await fetch(`/ai/service?prompt=${encodeURIComponent(message)}&chatId=${chatId}`);
                
                if (response.ok) {
                    const aiResponse = await response.text();
                    addMessage(aiResponse, false);
                    showStatus('AI响应成功', 'success');
                } else {
                    addMessage('抱歉，AI服务暂时不可用，请稍后重试。', false);
                    showStatus(`请求失败: ${response.status}`, 'error');
                }
            } catch (error) {
                addMessage('网络连接错误，请检查服务是否正常运行。', false);
                showStatus(`连接错误: ${error.message}`, 'error');
            }
            
            setLoading(false);
        }
        
        function handleKeyPress(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }
        
        async function testHealth() {
            try {
                const response = await fetch('/actuator/health');
                if (response.ok) {
                    const data = await response.json();
                    showStatus(`健康检查通过: ${data.status}`, 'success');
                } else {
                    showStatus('健康检查失败', 'error');
                }
            } catch (error) {
                showStatus(`健康检查错误: ${error.message}`, 'error');
            }
        }

        async function testSimple() {
            try {
                const response = await fetch('/ai/test?message=简单测试');
                if (response.ok) {
                    const data = await response.text();
                    showStatus('简单测试成功', 'success');
                    addMessage('🧪 简单测试结果：' + data, false);
                } else {
                    showStatus('简单测试失败', 'error');
                }
            } catch (error) {
                showStatus(`简单测试错误: ${error.message}`, 'error');
            }
        }

        async function testApi() {
            try {
                showStatus('正在测试API直连...', 'success');
                const response = await fetch('/ai/testapi');
                if (response.ok) {
                    const data = await response.text();
                    showStatus('API直连测试完成', 'success');
                    addMessage('🔗 API直连测试结果：' + data, false);
                } else {
                    showStatus('API直连测试失败', 'error');
                }
            } catch (error) {
                showStatus(`API直连测试错误: ${error.message}`, 'error');
            }
        }

        async function testConfig() {
            try {
                showStatus('正在检查SpringAI配置...', 'success');
                const response = await fetch('/ai/testconfig');
                if (response.ok) {
                    const data = await response.text();
                    showStatus('SpringAI配置检查完成', 'success');
                    addMessage('⚙️ SpringAI配置信息：' + data, false);
                } else {
                    showStatus('SpringAI配置检查失败', 'error');
                }
            } catch (error) {
                showStatus(`SpringAI配置检查错误: ${error.message}`, 'error');
            }
        }
        
        async function testFactory() {
            try {
                const response = await fetch('/getfactory');
                if (response.ok) {
                    const data = await response.json();
                    showStatus(`工厂数据获取成功，共${data.length}条记录`, 'success');
                    addMessage(`📊 工厂数据测试成功，共获取到${data.length}条工厂记录`, false);
                } else {
                    showStatus('工厂数据获取失败', 'error');
                }
            } catch (error) {
                showStatus(`工厂数据测试错误: ${error.message}`, 'error');
            }
        }
        
        function clearChat() {
            const chatContainer = document.getElementById('chatContainer');
            chatContainer.innerHTML = '<div class="ai-message">👋 对话已清空，请重新开始对话。</div>';
            chatId = 'test_' + Date.now();
            showStatus('对话已清空', 'success');
        }
        
        function testQuestions() {
            const questions = [
                '你好，请介绍一下自己',
                '今天天气怎么样？',
                '请帮我写一首关于春天的诗',
                '什么是人工智能？'
            ];
            
            const randomQuestion = questions[Math.floor(Math.random() * questions.length)];
            document.getElementById('userInput').value = randomQuestion;
            sendMessage();
        }
        
        // 页面加载完成后的初始化
        window.onload = function() {
            showStatus('SpringAI智能助手已就绪', 'success');
        };
    </script>
</body>
</html>
